<style lang="scss" scoped>
  @import "../../utils/base.scss";

  .m-tooltip-overflow {
    z-index: 999;
  }
</style>
<template>
  <div ref='base' class="quest_content">
    <stepInfo ref="stepInfo" v-model="stepTitleId" :ishidden="ishidden" :stepTitle="stepTitle">
      <template slot="content">
        <baseInfo v-show="stepTitleId === 0" ref="baseInfo" :is="'baseInfo'" :ifedit="ifedit" :reqId="reqId"
          :PuserId="userId" :ProleList="roleList" :PprojectList="projectList" :Papply="networkInfo"></baseInfo>
        <businessInfo v-show=" stepTitleId === 1" ref="businessInfo" :is="'businessInfo'" :ifedit="ifedit"
          :Papply="networkInfo" :allSysList="allSysList" :PoriuserList="oriuserList" :PtaruserList="taruserList">
        </businessInfo>
        <startegies v-show="stepTitleId === 2" ref="startegies" :is="'startegies'" :ifedit="ifedit" :ishidden="ishidden"
          :Papply="networkInfo" :severColumns="severColumns" :PfilesList="filesList"></startegies>
        <!-- <component v-if="stepTitleId === 2" ref="file" :is="'file'" :ifedit="ifedit" :filesList="filesList" v-model="networkInfo.files"></component> -->
        <div v-if="stepTitleId === 3" ref="allInfo">
          <baseInfo ref="baseInfo1" :is="'baseInfo'" :ifedit="true" :reqId="reqId" :PuserId="userId"
            :ProleList="roleList" :PprojectList="projectList" :Papply="networkInfo"></baseInfo>
          <businessInfo ref="businessInfo1" :is="'businessInfo'" :ifedit="true" :Papply="networkInfo"
            :allSysList="allSysList" :PoriuserList="oriuserList" :PtaruserList="taruserList"></businessInfo>
          <startegies ref="startegies1" :is="'startegies'" :ifedit="true" :ishidden="ishidden" :Papply="networkInfo"
            :severColumns="severColumns" :PfilesList="filesList"></startegies>
          <!-- <component ref="file1" :is="'file'" :ifedit="ifedit" :filesList="filesList" v-model="networkInfo.files"></component> -->
        </div>
      </template>
    </stepInfo>
  </div>
</template>
<script>
  import ajax from "../../ajax_util"
  import Axios from 'axios'
  import notice from '../../base/notice'
  import file from './settledin/file'
  import baseInfo from './network/baseInfo'
  import businessInfo from './network/businessInfo'
  import startegies from './network/strategy'
  import stepInfo from './step_info.vue'

  export default {
    name: "network",
    components: {
      notice,
      file,
      baseInfo,
      businessInfo,
      startegies,
      stepInfo
    },
    data() {
      return {
        stepPage: "baseInfo",
        stepTitleId: 0,
        stepTitle: [{
            id: 0,
            name: "基本信息"
          },
          {
            id: 1,
            name: "业务信息"
          },
          {
            id: 2,
            name: "策略附件"
          },
          {
            id: 3,
            name: "概览"
          }
        ],
        showmd: true,
        serviceType: "net",
        disabledDate: {
          disabledDate(date) {
            return date && date.valueOf() < Date.now();
          }
        },

        httpHeader: {
          Authorization: this.$store.state.token
        },
        fileUrl: this.CONFIG.file_url,
        readonly: true,
        istrue: true,
        labelWidth: 140,
        severColumns: [
          //  {
          //     title: "序号",
          //     align: "center",
          //     width: 60,
          //     slot: "index",
          //     fixed: 'left'
          // },
          {
            title: "访问方向 (*必填)",
            align: "center",
            width: 200,
            key: "direction",
            slot: "direction",
            renderHeader: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: "例：'资源池''集群'-->'资源池''集群'",
                    placement: 'top',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  },
                  class: 'm-tooltip-overflow'
                }, [
                  h('span', '访问方向 (*必填)'),
                  h('Icon', {
                    props: {
                      type: 'ios-alert',
                      color: '#495060',
                      size: 'medium'
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ])
              ]);
            }
          },
          {
            title: "源地址 (*必填)",
            align: "center",
            width: 240,
            key: "oriAddr",
            slot: "oriAddr",
            renderHeader: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: "例：192.168.1.1-192.168.1.5或者192.168.3.3，多个IP请换行",
                    placement: 'top',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  },
                  class: 'm-tooltip-overflow'
                }, [
                  h('span', '源地址 (*必填)'),
                  h('Icon', {
                    props: {
                      type: 'ios-alert',
                      color: '#495060',
                      size: 'medium'
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ])
              ]);
            }
          },
          {
            title: "源地址对应的映射IP (选填)",
            align: "center",
            width: 240,
            key: "oriMapAddr",
            slot: "oriMapAddr",
            renderHeader: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: "选择内网/CMNetDCI_vpn策略类型，此项不必填",
                    placement: 'top',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  },
                  class: 'm-tooltip-overflow'
                }, [
                  h('span', '源地址对应的映射IP (选填)'),
                  h('Icon', {
                    props: {
                      type: 'ios-alert',
                      color: '#495060',
                      size: 'medium'
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ])
              ]);
            }
          },
          {
            title: "源端口",
            align: "center",
            width: 120,
            key: "oriPortFrom",
            slot: "oriPortFrom",
            // children: [
            //     {
            //         title: '从',
            //         align: 'center',
            //         width: 110,
            //         key: "oriPortFrom",
            //         slot: "oriPortFrom"
            //     },
            //     {
            //         title: '到',
            //         align: 'center',
            //         width: 110,
            //         key: "oriPortTo",
            //         slot: "oriPortTo"
            //     },
            // ]
          },
          {
            title: "目的地址 (*必填)",
            align: "center",
            width: 240,
            key: "targetAddr",
            slot: "targetAddr",
            renderHeader: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: "例：192.168.1.1-192.168.1.5或者192.168.3.3，多个IP请换行",
                    placement: 'top',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  },
                  class: 'm-tooltip-overflow'
                }, [
                  h('span', '目的地址 (*必填)'),
                  h('Icon', {
                    props: {
                      type: 'ios-alert',
                      color: '#495060',
                      size: 'medium'
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ])
              ]);
            }
          },
          {
            title: "目的地址对应的映射IP (选填)",
            align: "center",
            width: 240,
            key: "targetMapAddr",
            slot: "targetMapAddr",
            renderHeader: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: "选择内网/CMNetDCI_vpn策略类型，此项不必填",
                    placement: 'top',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  },
                  class: 'm-tooltip-overflow'
                }, [
                  h('span', '目的地址对应的映射IP (选填)'),
                  h('Icon', {
                    props: {
                      type: 'ios-alert',
                      color: '#495060',
                      size: 'medium'
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ])
              ]);
            }
          },
          {
            title: "目的端口 (*必填)",
            align: "center",
            width: 130,
            key: "targetPortfrom",
            slot: "targetPortfrom",
            renderHeader: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    content: "多个端口用、隔开",
                    placement: 'top',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  },
                  class: 'm-tooltip-overflow'
                }, [
                  h('span', '目的端口 (*必填)'),
                  h('Icon', {
                    props: {
                      type: 'ios-alert',
                      color: '#495060',
                      size: 'medium'
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ])
              ]);
            }
          },
          {
            title: "传输协议 (*必填)",
            align: "center",
            width: 130,
            key: "tcpProtocol",
            slot: "tcpProtocol",
            // children: [
            //     {
            //         title: "TCP",
            //         align: "center",
            //         width: 100,
            //         key: "tcpProtocol",
            //         slot: "tcpProtocol"
            //     },
            //     {
            //         title: 'UDP',
            //         align: 'center',
            //         width: 100,
            //         key: "udpProtocol",
            //         slot: "udpProtocol"
            //     },
            // ]
          },

          {
            title: "应用层协议 (选填)",
            align: "center",
            width: 130,
            key: "appProtocol",
            slot: "appProtocol"
          },
          {
            title: "策略用途 (*必填)",
            align: "center",
            width: 200,
            key: "purpose",
            slot: "purpose"
          },
          {
            title: "操作",
            align: "center",
            width: 80,
            slot: "action",
            // fixed: 'right',
          }

        ],
        //租户列表
        roleList: [],
        //项目名称
        projectList: [],
        networkInfo: {
          netOpenAppendix: "",
          projectInfo: {
            roleId: "", //租户id
            roleName: "", //租户名称
            projectId: "", //关联项目ID
            projectName: "", //关联项目名称

            entryStartTime: "", //开始时间
            entryEndTime: "", //结束时间
            entryCycle: "", //入驻周期
            entryPosition: "", //入驻地址
            isContract: "", //是否签订合同
            projectType: "", //项目类型

            projectManager: "", //项目经理
            managerTel: "", //项目经理联系方式
            business: "",
            projectDoc: "" //项目介绍
          },
          actTime: "",
          usetime: "",
          applyContact: "",
          applyMail: "",
          applyPhone: "",
          company: "",
          deadline: "",
          files: [{}],
          hopeTime: "",
          netType: "",
          oriPool: "",
          oriSys: "",
          oriSysContact: "",
          oriSysContactId: "",
          tarSysContactId: "",
          oriSysMail: "",
          oriSysPhone: "",
          reqSubject: "",
          reqDes: "",
          startTime: new Date(),
          fourA: '',
          startegies: [],
          tarPool: "",
          tarSys: "",
          tarSysContact: "",
          tarSysMail: "",
          tarSysPhone: "",

        },
        oriuserList: [],
        taruserList: [],
        allSysList: [], //全部系统
        userId: 0
      }
    },
    mounted: function() {
      console.log("this.reqId,this.draftsId---------->", this.reqId, this.draftsId)
      if (this.reqId != null) {
        console.log("网络策略获取表单详情---------->")
        this.getApplyInfo(); //获取表单详情
        if (!this.ifedit) {
          this.getAllSys();
          this.getRoleLis(this.userId);
          this.checkRole(this.networkInfo.projectInfo.roleId);
        }
      } else if (this.draftsId != null) {
        this.getAllSys()
        this.getDrafts()
        console.log("获取草稿---------->")
      } else {
        this.getUserInfo()
        this.getAllSys()
        this.getRoleLis(this.$store.state.user.id)
        this.networkInfo.actTime = new Date()
        this.networkInfo.deadline = new Date(new Date().getTime() + 31536000000)
      }
    },
    methods: {
      //获取租户角色
      getRoleLis(userId) {
        var url = this.CONFIG.url_know + "/tenantByUserId/" + userId
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("====getRoleLis=1111=====", data);
            that.roleList = data

            if (that.networkInfo.projectInfo.roleId != null && that.networkInfo.projectInfo.roleId != '') {
              that.checkRole(that.networkInfo.projectInfo.roleId);
            }
          }
        })
      },
      //选择租户
      checkRole(roleId) {
        console.log("========roleId44222222======", roleId);
        this.roleList.some(item => {
          console.log("========item======", item);
          if (roleId == item.id) {
            this.projectList = item.projects;
            return true
          }
        })

      },
      setApplInfo(stepId) {
        var isSubmit = false
        if (stepId == 0) {
          this.networkInfo = this.$refs.baseInfo.networkInfo
          isSubmit = this.$refs.baseInfo.validate()
        } else if (stepId == 1) {
          this.networkInfo = this.$refs.businessInfo.networkInfo
          isSubmit = this.$refs.businessInfo.validate()
        } else if (stepId == 2) {
          if (!this.$refs.startegies.validate()) {
            isSubmit = false
          } else {
            isSubmit = true
          }
          //   if(this.networkInfo.files == null || this.networkInfo.files.length == 0 ){
          //       this.stepTitleId = 2
          //       isSubmit = true
          //     //this.$Message.error('请上传网络策略申请附件');
          //   }else{
          //     isSubmit = true
          //   }
        } else if (stepId == 3) {
          isSubmit = true
        }
        return isSubmit
      },
      getUserInfo() {
        var temp = this.$store.state.user
        console.log("getUserInfo", temp)
        this.networkInfo.applyContact = temp.user_name
        this.networkInfo.applyPhone = temp.phone
        this.networkInfo.applyMail = temp.email
        this.networkInfo.company = temp.department
        this.networkInfo.applyUserId = temp.id
        this.networkInfo.fourA = temp.fourA
      },

      getApplyInfo() {
        var data = this.processInfo
        console.log("getApplyInfo----111->", data)
        this.networkInfo = data.content
        console.log('this.networkInfo', this.networkInfo)
        if (data.files != undefined && data.files != null) {
          this.networkInfo.files = data.files
        }
        this.networkInfo.reqDes = this.processInfo.reqDes
        if (this.ifedit) {
          this.networkInfo.startTime = this.formatDate(data.startTime)
          this.networkInfo.hopeTime = this.formatDate(data.hopeTime)
          this.networkInfo.actTime = this.formatDate(data.content.actTime)
          this.networkInfo.deadline = this.formatDate(data.content.deadline)
        }
        this.networkInfo.projectInfo = {
          roleId: data.base.role.id, //租户id
          roleName: data.base.role.tenant_name, //租户名称
          projectId: data.base.project.id, //关联项目ID
          projectName: data.base.project.project, //关联项目名称

          entryStartTime: data.base.project.create_time, //开始时间
          entryEndTime: data.base.project.end_time, //结束时间
          entryCycle: data.base.project.cycle, //入驻周期
          entryPosition: data.base.project.position, //入驻地址
          isContract: data.base.project.isContract, //是否签订合同
          projectType: data.base.project.projectType, //项目类型

          projectManager: data.base.project.manager, //项目经理
          managerTel: data.base.project.manager_phone, //项目经理联系方式
          projectDoc: data.base.project.des, //项目介绍
        }

        if (data.base.project.business == undefined || data.base.project.business == null || data.base.project
          .business == "") {
          this.networkInfo.projectInfo.business = data.base.project.tenant_business
        } else {
          this.networkInfo.projectInfo.business = data.base.project.business
        }

        this.oriuserList = [{
          id: data.content.oriSysContactId,
          user_name: data.content.oriSysContact
        }]
        this.taruserList = [{
          id: data.content.tarSysContactId,
          user_name: data.content.tarSysContact
        }]

        this.userId = data.base.userFBean.id
        this.stepTitleId = 3
      },
      getDrafts() {
        var url = this.CONFIG.base_url_test + "/draft/content/" + this.draftsId
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log('getDrafts', data)
            that.networkInfo = data.req.object
            //that.networkInfo.startTime = that.formatDate(data.req.alloNet.startTime)
            that.networkInfo.startTime = data.req.object.startTime > 0 ? that.formatDate(data.req.object
              .startTime) : ""
            that.networkInfo.hopeTime = data.req.object.hopeTime > 0 ? that.formatDate(data.req.object.hopeTime) :
              ""
            that.networkInfo.actTime = data.req.object.actTime > 0 ? that.formatDate(data.req.object.actTime) :
              new Date()
            that.networkInfo.deadline = data.req.object.deadline > 0 ? that.formatDate(data.req.object.deadline) :
              ""
            console.log(that.networkInfo.startTime)
            that.oriuserList = [{
              id: data.req.object.oriSysContactId,
              user_name: data.req.object.oriSysContact
            }]
            that.taruserList = [{
              id: data.req.object.tarSysContactId,
              user_name: data.req.object.tarSysContact
            }]
            that.getRoleLis(that.$store.state.user.id)
            // if(data.req.object.projectInfo.roleId != null && data.req.object.projectInfo.roleId != ''){
            //     console.log("=====666=====");
            //     that.checkRole(data.req.object.projectInfo.roleId)
            // }
          }
        })
      },


      // 获取所有的系统
      getAllSys() {
        var url = this.CONFIG.progress_url + "/system-map/for/net"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.allSysList = data
          }
        })
      },

      isValidIP(ip) {
        var reg =
          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
        return reg.test(ip);
      },

      validate() {
        if (this.stepTitleId != 3) {
          this.$refs.stepInfo.chlickStep(3)
          this.$Modal.info({
            title: "温馨提示：",
            content: "请最终确认申请相关信息！"
          });
        } else {
          this.setApplInfo(this.stepTitleId)
          var isSubmit = false
          if (!this.$refs.baseInfo.validate()) {
            this.stepTitleId = 0
          } else if (!this.$refs.businessInfo.validate()) {
            this.stepTitleId = 1
          } else if (!this.$refs.startegies.validate()) {
            this.stepTitleId = 2
            isSubmit = false
            // this.$Message.error('请填写正确的IP');
          } else {
            isSubmit = true
          }

          return isSubmit
        }
      },
      getInfo() {
        var t = JSON.stringify(this.networkInfo)
        var temp1 = JSON.parse(t)
        var temp = {}
        temp.base = {
          userId: temp1.applyUserId,
          userName: temp1.applyContact,
          roleId: temp1.projectInfo.roleId,
          projectId: temp1.projectInfo.projectId,
          sourceUserId: temp1.oriSysContactId,
          targetUserId: temp1.tarSysContactId,
        }
        temp.object = temp1
        //temp.alloNet.startTime = new Date(temp1.startTime).getTime()/1000
        temp.object.startTime = parseInt(new Date(temp1.startTime).getTime() / 1000)
        temp.object.hopeTime = parseInt(new Date(temp1.hopeTime).getTime() / 1000)
        temp.object.actTime = parseInt(new Date(temp1.actTime).getTime() / 1000)
        temp.object.deadline = parseInt(new Date(temp1.deadline).getTime() / 1000)
        var publicInfo = this.utils.setPublicInfoInfo(temp1.reqSubject, temp.object.startTime, temp.object.hopeTime,
          temp1.reqDes)
        temp.files = this.networkInfo.files
        temp.puslicInfo = publicInfo
        //temp.files = this.$refs.file.getFiles()
        return temp
      },
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        return year + '-' + month + '-' + day;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },
      // 获取处理时需要提交的参数
      getHandleParams(handleInfo) {
        handleInfo.reqSubject = this.networkInfo.reqSubject
        handleInfo.startTime = parseInt(new Date(this.networkInfo.startTime).getTime() / 1000)
        handleInfo.hopeTime = new Date(this.networkInfo.hopeTime).getTime() / 1000
        handleInfo.reqDes = this.networkInfo.reqDes
        handleInfo.isEdit = this.isEdit;
        console.log("aaaa-------->", this.ifedit, this.isEdit == 1)
        handleInfo.isChangeContent = 0;
        if (!this.ifedit) {
          handleInfo.isChangeContent = 1;
        }
        if (this.isEdit == 1) {
          handleInfo.roleId = this.networkInfo.projectInfo.roleId;
          handleInfo.projectId = this.networkInfo.projectInfo.projectId;
          handleInfo.content = this.getInfo()
        }
      },
      //处理页面获取下一步处理人需要的参数
      getHandleUserParams(opOptions) {
        var param = {}
        param.vari = opOptions
        param.roleId = this.networkInfo.projectInfo.roleId;
        param.projectId = this.networkInfo.projectInfo.projectId;
        return param
      },

    },

    props: {
      isEdit: {},
      ifedit: {
        type: Boolean,
        default: false,
      },
      reqId: {
        default: null
      },
      draftsId: {
        default: null
      },
      filesList: {},
      processInfo: {},
      ishidden: {
        type: Boolean,
        default: false,
      },
    },
    // computed:{
    //     isEdit(){
    //         if(this.$store.state.tabs != undefined && this.$store.state.tabs != null){
    //             return this.$store.state.tabs.isEdit
    //         }else{
    //             return ""
    //         }
    //     }
    // },
    watch: {
      ifedit(Val) {
        console.log("ifedit------->", this.ifedit)
        if (!this.ifedit) {
          this.getAllSys();
          this.getRoleLis(this.userId);
          this.checkRole(this.networkInfo.projectInfo.roleId);
        }
      }
    }
  }
</script>
